<template>
  <a-drawer
    :title="title"
    :maskClosable="true"
    width="650"
    placement="right"
    :closable="true"
    @close="close"
    :visible="visible"
    style="overflow: auto; padding-bottom: 53px"
  >
    <div style="width: 100%; height: 700px;">
      <transfer-check
        v-if="transferCheckVisible"
        ref="transferSelect"
        :url="url.roleList"
        :init-origin-target-keys-url="url.listByIds"
        :tab-columns="tabColumns"
        :origin-target-keys="originTargetKeys"
        :key-name="keyName"
      />
    </div>

    <div class="drawer-bootom-button">
      <a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
    </div>

  </a-drawer>
</template>
<script>
import {putAction,getFileAccessHttpUrl,getAction} from '@/api/manage'
export default {
  name: 'RoleModal',
  components: {
    TransferCheck: () => import('@/components/tools/TransferCheck'),
  },
  data() {
    return {
      title: '用户角色配置',
      visible: false,
      userId: '',
      confirmLoading: false,
      keyName: 'id',
      url: {
        roleList: '/system/upmsRole/list',
        listByIds: '/system/upmsRole/listByIds',
        getUserRoleListByUserId: '/upms/user/getUserRoleListByUserId',
        saveUserRoles: '/upms/user/saveUserRoles'
      },
      tabColumns: [
        {
          dataIndex: 'name',
          title: '名称',
        },
        {
          dataIndex: 'description',
          title: '描述',
        },
      ],
      originTargetKeys:[],
      transferCheckVisible: false
    }
  },
  methods: {
    handleSubmit(){
      var vm=this;
      let result = vm.$refs.transferSelect.targetKeys;
      if(result.length===0){
        this.$message.warning('请选择要分配的角色');
        return;
      }
      this.confirmLoading=true;
      getAction(this.url.saveUserRoles,{userId:this.userId,roleIds:result.join(',')}).then(res=>{
        if(res.code==200){
          vm.$message.success('操作成功')
          setTimeout(function(){
            vm.handleCancel()
          },2000)
        }else{
          vm.$message.warning('操作失败')
        }
        this.confirmLoading=false;
      })
    },
    handleCancel(){
      this.close()
    },
    show(userId) {
      this.userId = userId
      this.visible = true
    },
    close() {
      this.$emit('close')
      this.transferCheckVisible=false
      this.visible = false
    },
    loadData() {
      var vm=this;
      vm.originTargetKeys=[]
      getAction(this.url.getUserRoleListByUserId,{userId:this.userId}).then(res=>{
        if(res.code==200){
          var data=res.result;
          if(data){
            data.forEach(element => {
              vm.originTargetKeys.push(element.roleId)
            });
          }
        }else{
          this.$message.warning('加载已有用户角色失败')
        }
        vm.transferCheckVisible=true
      })
    },
  },
  watch: {
    visible() {
      if (this.visible) {
        this.loadData()
      }
    },
  },
}
</script>
<style lang="less" scoped>
.drawer-bootom-button {
  position: absolute;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}
</style>